<template>
    <!-- 弹出框 -->
    <div class="dialog-box">
        <el-dialog
            :title="dialogTitle"
            :visible.sync="Visible"
            :width="dialogWidth"
            @close="closeDialog"
        >
            <slot></slot>
            <slot name="foot" slot="footer"></slot>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'Dialog',
    props: {
        dialogTitle: {
            type: String,
            default: () => {
                return '';
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        dialogWidth: {
            type: String,
            default: () => {
                return '50%';
            }
        }
    },
    data() {
        return {
            Visible: this.dialogVisible
        };
    },
    methods: {
        closeDialog() {
            this.$emit('update:dialogVisible', false);
            this.$emit('close-dialog');
        }
    },
    watch: {
        dialogVisible(val) {
            this.Visible = val;
        }
    }
};
</script>

<style lang="less" scoped>
.dialog-box {
    position: relative;
    ::v-deep .el-dialog {
        border-radius: 1rem;
    }
    ::v-deep .base-pagination {
        bottom: 1.5rem;
    }
}
</style>
